<template>
  <div class="container">
    <div class="cont">
      <div class="left">
        <div v-for="(temp,index) in 4" :key="index" class="left-btn">
          <div
            class="btn1"
            :class=" btn_index===temp?`btn${temp}-active`:''"
            @click="checked(temp)"
          >
            <img :src="`./static/00${temp}.png`" >
          </div>
        </div>
      </div>
      <div class="right">
        <div>
          <img :src="bg" >
        </div>
        <div class="list-cont">
          <div v-for="(temp,index) in dataList" :key="index" class="list">
            <div class="name">{{ temp.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { rubbishClassify } from '@/api/utils';
export default {
    data() {
        return {
            dataList: [],
            btn_index: 1,
            bg: './static/01.png'
        }
  },
    created() {
        const miva = this
    miva.loadData(1)
  },
    methods: {
        async loadData(type) {
            const miva = this
      const res = await rubbishClassify({ type, page: 1, size: 999 })
      miva.dataList = res.data || []
    },
        checked(params) {
            const miva = this
      miva.loadData(params)
      miva.bg = `./static/0${params}.png`
      miva.btn_index = params
    }
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  .cont {
    display: flex;
    height: auto;
    justify-content: space-between;
    .left {
      width: 25%;
      // border: 1px solid;
      height: 140vw;
      div {
        padding: 5% 5% 0;
        box-sizing: border-box;
        width: 100%;
        // border: 1px solid #ccc;
        img {
          width: 100%;
        }
      }
    }
    .list-cont {
      height: 83vw;
      overflow: scroll;
      margin-top: -5px;
    }
    .btn1 {
      border: 3px solid transparent;
      border-radius: 10px;
    }
    .btn1-active {
      border-color: #e43c61;
    }
    .btn2-active {
      border-color: #2dc493;
    }
    .btn3-active {
      border-color: #4076fb;
    }
    .btn4-active {
      border-color: #7f94b4;
    }
    .right {
      height: auto;
      width: 75%;
      padding-right: 10px;

      div {
        img {
          width: 100%;
          border-radius: 20px 20px 0 0;
        }
      }
      .list {
        background: #f0f0f0;
        color: #666666;
        padding: 20px 0 15px 20px;
        border-bottom: 1px solid #c1c1c1;
        font-size: 14px;
      }
    }
  }
}
</style>
